@()(implicit request: play.api.mvc.RequestHeader)
@main("Home") {


	<style>
			.thumbnail {
				height: 250px;
			}

			.thumbnail > .row {
				margin-top: 12px;
			}

			.myFont {
				font-size: 16px;
				margin-left: 5px;
			}

			.panel-default > .panel-heading {
				/*background:transparent;*/
			}

			.myImg {
				width: 25px ;
				vertical-align: middle;
			}

			.myDiv {
				line-height: 2.5em;
				display: flex;
				align-items: center;
			}

			.myTitle {
				font-size: 18px;
			}

			.myHr {
				border-top: 2px solid #002060;
			}

			.myBtn {
				background-color: #002060 ;
			}

			.myBtn:hover {
				background-color: #0D4D79 ;
			}

			div.screenshot img {
				/*height: 300px !important;*/
				width: 100%;
			}

			.carousel-control .fa-prev, .carousel-control .fa-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
				position: absolute;
				top: 50%;
				z-index: 5;
				display: inline-block;
			}

			.carousel-control {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 10%;
				font-size: 20px;
				color: #fff;
				text-align: center;
				text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
				filter: alpha(opacity=50);
				opacity: .5;
			}

			.carousel-caption {
				background-color: #555;
				opacity: 0.8;
				z-index: 1;
				width: 100%;
				bottom: 0px;
				padding-top: 0px;
				right: 30%;
				left: 0%;
				padding-bottom: 0px

			}

			.form-control-feedback {
				right: -30px !important;
			}


	</style>
	<div class="row">
		<div class="col-md-7" style="margin-top: 15px">
			<h3 class="panel-title myTitle" style="margin-top: 0px;
				margin-bottom: 10px">Welcome to MTD</h3>
			<hr class="myHr" style="margin-bottom: 15px;
				margin-top: 5px;">
			<div style="height: 275px">
				<p class="text-justify">
					XXX.
				</p>
			</div>

			<h3 class="panel-title myTitle" style="margin-top: 20px;
				margin-bottom: 10px">Data Summary</h3>

			<hr class="myHr" style="margin-bottom: 15px;
				margin-top: 5px;">

			<div class="row" style="">
				<div class="col-sm-12">
				XXX.
				</div>

			</div>

		</div>
		<div class="col-md-5">

			<div style="display: none">
				<h4 style="margin-top: 35px">Global Visitors</h4>

				<div>
					<script type="text/javascript" src="//rf.revolvermaps.com/0/0/7.js?i=51bv1n0un8t&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;br=5&amp;sx=0" async="async"></script>
				</div>
			</div>


			<h4 style="margin-top: 360px">Release Notes&amp;News</h4>

			<ul class="list-unstyled">
				<li>
					<i class="fa fa-chevron-circle-right"></i>
					XXX.
				</li>
			</ul>

		</div>

	</div>

	<div class="row" style="margin: 15px 0px">
		<div class="page-footer" style="background: transparent;
			font-size: 13px;
			padding: 12px 0px;">
			<div class="col-md-9">
				<div style="text-align: center;
					color: #555">
					Copyright © 2021. All Rights Reserved.
				</div>
			</div>

		</div>
	</div>

	<script>

			$(function () {

				Home.init

			})

	</script>
}
